<template>
  <el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ name: 'dashboard' }">控制台</el-breadcrumb-item>
      <el-breadcrumb-item>优惠活动</el-breadcrumb-item>
    </el-breadcrumb>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-button type="danger" size="small" @click="delSelections()">删除选中项</el-button>
      </el-col>
    </el-row>

    <blank />

    <el-row>
      <el-table :data="acts" style="width: 100%" stripe @select-all="all" @select="select" v-loading="loading">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="活动状态">
          <template scope="scope">
            <el-switch
              v-model="scope.row.IsShow"
              on-text="开启"
              off-text="关闭"
              on-color="#13ce66"
              off-color="#ff4949"
              @change="change(scope.row, scope.$index)">
            </el-switch>
          </template>x
        </el-table-column>

        <el-table-column label="链接图片">
          <template scope="scope">
            <el-button type="primary" size="mini" @click="preview(scope.row.LinkImgUrl)">看图</el-button>
          </template>
        </el-table-column>

        <el-table-column label="详情图片">
          <template scope="scope">
            <el-button type="primary" size="mini" @click="preview(scope.row.DetailImgUrl)">看图</el-button>
          </template>
        </el-table-column>

        <el-table-column prop="ActExpiredString" label="活动过期时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="Title" label="优惠券标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="Worth" label="优惠券价值" show-overflow-tooltip></el-table-column>
        <el-table-column prop="ExpiredString" label="优惠券过期时间" show-overflow-tooltip></el-table-column>
        <el-table-column prop="Detail" label="优惠券详情" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template scope="scope">
            <el-button type="success" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delACT(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <blank />

    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>

    <el-dialog title='活动链接图片' v-model="callDialog">
      <div class="preview-container" v-if="previewSrc">
        <img :src="previewSrc" class="preview-img" />
      </div>
    </el-dialog>

  </el-row>
</template>

<script>
  import blank from '@/components/Blank'
  import { Message, MessageBox } from 'element-ui'
  import router from '@/router'
  import ax, { errhandler } from '@/api/_axios-config'
  import * as apis from '@/api/_api'

  export default {
    name: 'act',
    filters: {
      isRead: function (isread) {
        if (isread) {
          return '已处理'
        } else {
          return '未处理'
        }
      },
      isReadColor: function (isread) {
        if (isread) {
          return 'success'
        } else {
          return 'warning'
        }
      }
    },
    data () {
      return {
        currentPage: 1,
        pageSize: 20,
        total: 100,
        acts: [],
        deleteIds: [],
        deleteIndex: [],
        callDialog: false,
        previewSrc: '',
        loading: true
      }
    },
    methods: {
      handleSizeChange (size) {
        this.pageSize = size
        this.getAct(this.pageSize, this.currentPage)
      },
      handleCurrentChange (page) {
        this.currentPage = page
        this.getAct(this.pageSize, this.currentPage)
      },
      preview (src) {
        this.previewSrc = src
        this.callDialog = true
      },
      edit (row) {
        router.push({ name: 'addact', params: { actId: row.Id } })
      },
      change (row, index) {
        for (let i = 0; i < this.acts.length; i++) {
          if (this.acts[i]['IsShow']) {
            if (i === index) {
              continue
            }
            this.acts[index]['IsShow'] = false
            Message.error('已经有开启的活动，同一时间只能开启一个')
            return
          }
        }
        ax.patch(apis.PATCH_ACT_SHOW, { id: row.Id, isShow: !row.IsShow }).then(response => {
          let result = response.data
          if (result.BoolStatus) {
            // this.acts[index]['IsShow'] = !this.acts[index]['IsShow']
          } else {
            Message.error(result.Message)
            this.acts[index]['IsShow'] = false
          }
        }).catch(err => {
          errhandler(err)
        })
      },
      getAct (pageSize, page) {
        ax.get(apis.PAGE_ACT, { params: { pageSize: pageSize, page: page } }).then(
          response => {
            let result = response.data
            if (result.BoolStatus) {
              this.acts = result.Data.data
              this.total = result.Data.totalCount
            } else {
              Message.info('未获取优惠活动信息')
            }
            this.loading = false
          }
        ).catch(
          err => {
            errhandler(err)
            this.loading = false
          }
        )
      },
      selectHandle (selections) {
        let ids = []
        selections.forEach(function (item) {
          ids.push(item.Id)
        })
        this.deleteIds = ids
      },
      all (selections) {
        this.selectHandle(selections)
      },
      select (selections, row) {
        this.selectHandle(selections)
      },
      delACT (index, row) {
        if (row.IsShow) {
          Message.error('开启的活动无法删除')
          return
        }
        MessageBox.confirm('确定删除该活动？', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          let ids = [ row.Id ]
          ax.delete(apis.ACT_DELETE, { data: ids }).then(
            response => {
              var result = response.data
              if (result.BoolStatus) {
                this.acts.splice(index, 1)
                Message.success('删除成功')
              } else {
                Message.success('删除失败')
              }
            }
          ).catch(
            err => {
              errhandler(err)
            }
          )
        }).catch(() => {
          Message.info('取消删除操作')
        })
      },
      delSelections () {
        if (this.deleteIds === [] || this.deleteIds.length <= 0) {
          Message.info('未选中任何元素')
          return
        }
        for (let i = 0; i < this.acts.length; i++) {
          for (let j = 0; j < this.deleteIds.length; j++) {
            if (this.acts[i].IsShow && this.acts[i].Id === this.deleteIds[j]) {
              Message.error('选中的活动已有开启的活动，无法删除')
              return
            }
          }
        }
        MessageBox.confirm('确定删除选中的活动？', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          ax.delete(apis.ACT_DELETE, { data: this.deleteIds }).then(
            response => {
              var result = response.data
              if (result.BoolStatus) {
                Message.success('删除成功')
                router.go(0)
              } else {
                Message.success('删除失败')
              }
            }
          ).catch(
            err => {
              errhandler(err)
            }
          )
        }).catch(() => {
          Message.info('取消删除操作')
        })
      }
    },
    created: function () {
      this.getAct(this.pageSize, this.currentPage)
    },
    components: { blank }
  }
</script>

<style lang="stylus">
  .delete-act
  .change-state
    color #FF4949
    font-weight bold
    cursor pointer

  .edit-act
    color #14da4a
    font-weight bold
    cursor pointer
  
  .del-selections
    font-weight bold
    cursor pointer
    color #FF4949
  
  .color-green
    color #13CE66

  .watch-images
    color #8552a1
    font-weight bold
    cursor pointer

  div.preview-container
    width 100%
    img.preview-img
      display block
      max-width 100%
      margin auto
      border 1px solid #ececec
</style>
